<!doctype html>
<!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>教师端班级选择</title>
    <meta name="description" content="Ela Admin - HTML5 Admin Template">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.0/normalize.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lykmapipo/themify-icons@0.1.2/css/themify-icons.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pixeden-stroke-7-icon@1.2.3/pe-icon-7-stroke/dist/pe-icon-7-stroke.min.css">
    <link rel="stylesheet" href="assets/css/cs-skin-elastic.css">
    <link rel="stylesheet" href="assets/css/lib/datatable/dataTables.bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/style.css">

    <!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script> -->
	<script src="assets/js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0/axios.min.js"></script>
	
</head>
<body >
    <!-- Left Panel -->

    <aside id="left-panel" class="left-panel">
        <nav class="navbar navbar-expand-sm navbar-default">

            <div id="main-menu" class="main-menu collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    
                    <li class="menu-title">菜单</li><!-- /.menu-title -->
                    <li>
                        <a href="tea-dataOfClass.html"> <i class="menu-icon fa fa-users"></i>班级 </a>
                    </li>
                    <li class="menu-title">退出</li><!-- /.menu-title -->
                    <li>
                        <a href="loginteacher.html"> <i class="menu-icon fa fa-user-o"></i>退出登录 </a>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </nav>
    </aside><!-- /#left-panel -->

    <!-- Left Panel -->

    <!-- Right Panel -->

    <div id="right-panel" class="right-panel">

        <!-- Header-->
        <header id="header" class="header">
            <div class="top-left">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#"><i class="menu-icon fa fa-user-circle fa-2x"></i></a>
					
                </div>
            </div>
          
        </header><!-- /header -->
        <!-- Header-->

        <div class="breadcrumbs">
            <div class="breadcrumbs-inner">
                <div class="row m-0">
                    
                    
                </div>
            </div>
        </div>

        <div class="content">
            <div class="animated fadeIn">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <strong class="card-title">班级信息</strong>
                            </div>
							
                            <div class="card-body">
									<div class="content" id="tclass2">
										<div class="animated fadeIn">
											<div class="row">
												<div class="col-md-4" v-for="(i,index) in classdatas">
													<aside class="profile-nav alt">
														<section class="card">
															<div class="card-header user-header alt bg-dark">
																<div class="media">
																	<div class="media-body">
																		<h2 class="text-light display-6">{{i.cname}}</h2> <!--班级名称-->
																		<p>老师 {{i.tname}}</p>
																	</div>
																</div>
															</div>
															<div class="weather-category twt-category">
																<ul>
																	<li class="active">
																		<h5>班级ID：
																		
																		</h5>
																		{{i.cid}}
																	</li>
																	<li>
																		<h5>任课老师ID：
																		</h5>
																		{{i.tid}}
																	</li>
																	<li>
																		
																		<h5>课程说明：</h5>
																		
																		{{i.cnote}}
																		
																	</li>
																	<li>
																		<h5>课程总人数：</h5>
																		{{i.cnum}}
																	</li>
																	
																</ul>
															</div>
															<div class="twt-write col-sm-12">
																<div style="text-align: center;">
																	<input class="btn btn-info" type="button" value="Select" @click="SelectClass(i.cid,i.cname)">
																</div>
															</div>
															<br>
														</section>
													</aside>
												</div>
									
									
									
											</div>
										</div>
									</div><!-- .content -->
									
									
									<!--
									
                                		<table class="table ">
                                			<thead>
                                				<tr >
                                					<th class="serial">班级ID</th>
                                					<th class="avatar">任课教师</th>
                                					<th>任课教师ID</th>
                                					<th>课程名称</th>
                                					<th>课程总人数</th>
                                					<th>选择课堂</th>
                                					
                                				</tr>
                                			</thead>
                                			<tbody id="tclass2">
                                				<tr v-for="(i,index) in classdatas">
                                					<td class="serial">{{i.cid}}</td>
                                					<td> {{i.cname}}</td>
                                					<td> <span class="name">{{i.tid}}</span> </td>
                                					<td> <span class="product">{{i.cname}}</span> </td>
                                					<td> <span class="count">{{i.cnum}}</span></td>
                                					<td>
                                						<input class="btn btn-success" type="button" value="Select" @click="SelectClass(i.cid)">
                                					</td>
                                				</tr>
                                			</tbody>
                                		</table>
										
										-->
										
                                	 <!-- /.table-stats -->
                            </div>
                        </div>
                    </div>


                </div>
            </div><!-- .animated -->
        </div><!-- .content -->


        <!-- /#right-panel -->

    <!-- Right Panel -->

    <!-- Scripts -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.4/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-match-height@0.7.2/dist/jquery.matchHeight.min.js"></script>
    <script src="assets/js/main.js"></script>


    <script src="assets/js/lib/data-table/dataTables.bootstrap.min.js"></script>
    <script src="assets/js/lib/data-table/dataTables.buttons.min.js"></script>
    <script src="assets/js/lib/data-table/buttons.bootstrap.min.js"></script>
    
    
    <script src="assets/js/lib/data-table/buttons.html5.min.js"></script>
    <script src="assets/js/lib/data-table/buttons.print.min.js"></script>
    <script src="assets/js/lib/data-table/buttons.colVis.min.js"></script>
    <script src="assets/js/init/datatables-init.js"></script>



	
	<script type="text/javascript">
		let vm=new Vue({
			el:'#tclass2',
			data:{
				classdatas:[]
			},
			mounted(){
				var username = window.localStorage.getItem('TUsername');//获取登录后的教师Username
				// var classdata=1;
				// window.localStorage.setItem('test',classdata);
				 axios.get(
				 		'http://172.81.214.138:8000/teacher_all_classes?username='+username)
				 	//成功返回
				 	.then(response => {
				 		//console.log(response);
				 		if(response.data.state==1){
				 			//alert('登陆成功');
									//console.log(response);
									this.classdatas=response.data.data;
									console.log(this.classdatas);
				 		}
				 		else{
				 			alert('登录失败！');
				 		}
				 	})
				 	//失败返回
				 	.catch(error => {
				 		console.log(error);
				 	})
			},
			methods:{
				SelectClass(cid,cname){
					//alert('现在你选择的班级是：'+cid);//验证选择
					window.localStorage.setItem('TselectClassName',cname);
					window.localStorage.setItem('TselectClass',cid);//存储cid
					window.location.assign('tea-dataOfStudent.html');
				}
			}
			
		})
	</script>

</body>
</html>
